<template>
	<view class="discount-container">
		<!-- 每一张优惠券 -->
		<view class="discount-item" v-for="(item, index) in discountList" :key="item.id">
			<!-- 优惠券左边部分 -->
			<view class="item-left">
				<view class="">
					￥{{item.money}}
				</view>
				<view class="">
					{{ item.title }}
				</view>
			</view>
			<!-- 优惠券右边部分 -->
			<view class="item-right">
				<view class="item-right-top">
					<view class="typeCoupon">
						{{item.is_code == 1?(item.is_code==3?'首月租金券':'平台满减券'):'首月租金券'}}
					</view>
					<view class="">
						可用于部分商品
					</view>
				</view>
				<view class="item-right-center">
					<view class="center">{{ item.info }}</view>
				</view>
				<view class="item-right-top">
					<view>有效期至</view>
					<view>{{item.end_at}}</view>
				</view>
				<view class="item-right-bottom">
					<view class="bottom-left">{{ item.bottom_left }}</view>
					<view :class="[item.is_have === 2 ? 'bottom-right' : 'bottom-right-have']"
						@click="getDiscount(item.is_have, index)">{{ item.is_have === 1 ? ishave : nohave}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-discount",
		props:['discountList'],
		data() {
			return {
				ishave: '已领取',
				nohave: '立即领取',
			}
		},
		methods: {
			getDiscount(have, index) {
				if (have !== 1) {
					uni.$showMsg("领取成功", 1500);
					this.discountList.splice(index, 1)
				} else {
					uni.$showMsg("请勿重新领取", 1500);
				}
 			}
		}
	}
</script>

<style scoped>
	.discount-container {
		padding: 0 15rpx;
	}
.typeCoupon{
    font-size: 20rpx;
    color: white;
    font-weight: 400;
    background-color: red;
    height: 40rpx;
    width: 120rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 15rpx;
    overflow: hidden;
}
	.discount-item {
		display: flex;
		width: 100%;
		height: 180rpx;
		margin-top: 30rpx;
		box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15);
	}

	.item-left {
		background-color: red;
		color: #fff;
		width: 30%;
		border: 1px solid red;
		border-radius: 20rpx 0 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item-right {
		background-color: #fff;
		width: 70%;
		display: flex;
		font-size: 25rpx;
		flex-direction: column;
		justify-content: space-around;
		align-items: stretch;
	}

	.item-right-top {
		display: flex;
		padding: 5rpx;
		margin-top: 20rpx;
	}

	.item-right-bottom {
		display: flex;
		justify-content: space-between;
	}

	.top-left {
		font-size: 20rpx;
		color: #fff;
		background-color: red;
		border: 1px solid red;
		border-radius: 10rpx;
	}

	.bottom-right {
		background-color: red;
		color: #fff;
		border: 1px solid red;
		border-radius: 20rpx;
		padding: 8rpx;
	}

	.bottom-right-have {
		background-color: #fff;
		color: red;
		border: 1px solid red;
		border-radius: 20rpx;
		padding: 8rpx;
		position: relative;
		left: -20rpx;
		top: -20rpx;
	}
</style>